<template>
  <div class="container">
    <div class="headerInfo">
      <div class="headerImg">
        <img src="@/assets/txx.jpg" alt class="txx">
      </div>
      <div class="headeName">多哈哈</div>
    </div>
    <div class="cont2">
      <div class="order">
        <div class="myOrder">
          <div class="orderName">我的订单</div>
          <div class="more" @click="routerLink(`allOrder`)">
            <span>全部订单</span>
            <span>></span>
          </div>
        </div>

        <div class="orderIcon">
          <div class="unPay" @click="routerLink(`allOrder`)">
            <img src="@/assets/dfk.png" alt>
          </div>
          <div class="unPay" @click="routerLink(`allOrder`)">
            <img src="@/assets/dfh.png" alt>
          </div>
          <div class="unPay" @click="routerLink(`allOrder`)">
            <img src="@/assets/dsh.png" alt>
          </div>
          <div class="unPay" @click="routerLink(`allOrder`)">
            <img src="@/assets/sh.png" alt>
          </div>
        </div>
      </div>

      <div class="serve">
        <div class="serveTitle">我的服务</div>
        <div class="serveIcon">
          <div @click="routerLink(`address`)">
            <img src="@/assets/add.png" alt>
          </div>
          <div @click="show = true">
            <img src="@/assets/serve.png" alt>
          </div>
        </div>
      </div>
    </div>
    <div v-show="show" class="fix" @click="show = false">
      <div class="cont-tk">
        <div class="title"><img src="@/assets/code.png" alt=""></div>
        <img src="@/assets/close.png" alt="" class="close">
      </div>
    </div>
    <!-- <img src="@/assets/yam.png" alt=""> -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: false
    }
  },
  methods: {
    routerLink(href) {
      this.$router.push({
        name: href
      })
    }
  }
}
</script>
<style lang="less">
.container {
   width: 100%;
  .headerInfo {
    width: 100%;
    height: 16vh;
    margin: 0 auto;
    background: #fff;
    display: flex;
    padding: 10px;
    box-sizing: border-box;
    .headerImg {
      width: 80px;
      height: 80px;
      overflow: hidden;
      padding: 10px;
      img {
        width: 100%;
        border-radius: 50%;
      }
    }
    .headeName {
      padding-top: 20px;
      font-size: 16px;
    }
  }
  .cont2 {
    width: 100%;
    min-height: 76vh;
    padding: 4vw;
    background: #f5f6f8;
    box-sizing: border-box;
    .order {
      width: 100%;
      background: #fff;
      margin: 0 auto 5%;
      .myOrder {
        width: 100%;
        background: #fff;
        display: flex;
        justify-content: space-between;
        padding: 10px;
        box-sizing: border-box;
        .orderName {
          font-size: 16px;
          font-weight: bold;
        }
        .more {
          display: flex;
          color: #999999;
          font-size: 14px;
        }
      }
      .orderIcon {
        padding: 10px 5px;
        display: flex;
        justify-content: space-between;
        img {
          width: 76%;
        }
      }
    }
    .serve{
        width: 100%;
        background: #fff;
        padding: 10px;
        box-sizing: border-box;
        .serveTitle{
            font-weight: bold;
        }
       .serveIcon{
           padding:15px 0;
           display: flex;
           img{
               width: 76%;
           }
       }
    }
  }
  .fix{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,.7);
        z-index: 99;
        .cont-tk{
            position: absolute;
            width: 80%;
            transform: translate(-50%,-50%);
            top:50%;
            left: 50%;
            img{
                width: 100%;
            }
            .close{
                width: 10%;
                top: 304px;
                left: 46%;
                position: absolute;
            }
            .title{
                padding:50px 40px;
                font-weight: bold;
                text-align: center;
            }
        }
  }
}
</style>
